@page "/tree-picker"
@inherits BasePage
@using MduiBlazor.Shared.Pages.Examples.TreePicker

<PageTitle>树形数据选择器</PageTitle>
<div class="mdui-m-y-5">
    <MduiText Typo="@Typo.display1" TextColor="@Colors.Theme.Primary">树形数据选择器</MduiText>
</div>

<PageContent>
    <PageContentItem Title="示例" OnClick="@(_=>ScrollToElementById("examples"))">
        <PageContentItem Title="单选" OnClick="@(_=>ScrollToElementById("simplepicker"))" />
        <PageContentItem Title="多选" OnClick="@(_=>ScrollToElementById("multipicker"))" />
    </PageContentItem>
    <PageContentItem Title="组件参数" OnClick="@(_=>ScrollToElementById("attr"))" />
</PageContent>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="examples">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">示例</MduiText>
    </h2>

    <MduiText id="simplepicker" Typo="@Typo.subheading"><b>单选</b></MduiText>
    <ExampleSection Component="@typeof(SimpleTreePicker)" />

    <MduiText id="multipicker" Typo="@Typo.subheading"><b>多选</b></MduiText>
    <ExampleSection Component="@typeof(MultiTreePicker)" />
</div>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="attr">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">组件参数</MduiText>
    </h2>

    <MduiTableContainer UseMduiTypo Class="mdui-m-y-1">
        <MduiSimpleTable>
            <thead>
                <th>组件</th>
                <th>参数名称</th>
                <th>类型/返回类型</th>
                <th>说明</th>
            </thead>
            <tbody>
                <tr>
                    <th rowspan="12">
                        <code>MduiTreePicker</code>
                    </th>
                    <td>
                        <code>Indent</code>
                    </td>
                    <td>
                        <code>string</code>
                    </td>
                    <td>每级下拉项的缩进量，默认<code>16px</code>。</td>
                </tr>
                <tr>
                    <td>
                        <code>Placeholder</code>
                    </td>
                    <td>
                        <code>string?</code>
                    </td>
                    <td><code>input</code>标签的<code>placeholder</code>属性。</td>
                </tr>
                <tr>
                    <td>
                        <code>Value</code>
                    </td>
                    <td>
                        <code>TValue?</code>
                    </td>
                    <td>选择器的值。</td>
                </tr>
                <tr>
                    <td>
                        <code>ValueChanged</code>
                    </td>
                    <td>
                        <code>EventCallback&lt;TValue&gt;</code>
                    </td>
                    <td>选择器值修改后的回调函数，一般用于双向绑定。</td>
                </tr>
                <tr>
                    <td>
                        <code>SelectedValues</code>
                    </td>
                    <td>
                        <code>IEnumerable&lt;TValue?&gt;?</code>
                    </td>
                    <td>多项选择器的值。</td>
                </tr>
                <tr>
                    <td>
                        <code>SelectedValuesChanged</code>
                    </td>
                    <td>
                        <code>EventCallback&lt;IEnumerable&lt;TValue?&gt;?&gt;</code>
                    </td>
                    <td>多项选择器值修改后的回调函数，一般用于双向绑定。</td>
                </tr>
                <tr>
                    <td>
                        <code>Disabled</code>
                    </td>
                    <td>
                        <code>bool</code>
                    </td>
                    <td>是否禁用，默认<code>false</code>。</td>
                </tr>
                <tr>
                    <td>
                        <code>Readonly</code>
                    </td>
                    <td>
                        <code>bool</code>
                    </td>
                    <td>是否只读，默认<code>false</code>。</td>
                </tr>
                <tr>
                    <td>
                        <code>AutoFocus</code>
                    </td>
                    <td>
                        <code>bool</code>
                    </td>
                    <td>是否自动获取焦点，默认<code>false</code>。</td>
                </tr>
                <tr>
                    <td>
                        <code>Required</code>
                    </td>
                    <td>
                        <code>bool</code>
                    </td>
                    <td>是否必填项，默认<code>false</code>。</td>
                </tr>
                <tr>
                    <td>
                        <code>MaxHeight</code>
                    </td>
                    <td>
                        <code>string?</code>
                    </td>
                    <td>下拉项的最大高度，该值为样式<code>max-height</code>的值，如<code>200px</code>、<code>20rem</code>等。</td>
                </tr>
                <tr>
                    <td>
                        <code>DirectionTop</code>
                    </td>
                    <td>
                        <code>bool</code>
                    </td>
                    <td>下拉项是否向上展开，默认<code>false</code>。</td>
                </tr>
                <tr>
                    <th rowspan="4">
                        <code>MduiTreePickerItem</code>
                    </th>
                    <td>
                        <code>Value</code>
                    </td>
                    <td>
                        <code>TValue</code>
                    </td>
                    <td>下拉项的值，不可为空。</td>
                </tr>
                <tr>
                    <td>
                        <code>DisplayString</code>
                    </td>
                    <td>
                        <code>string?</code>
                    </td>
                    <td>选择该项后，在<code>MduiPicker</code>文本框要显示的文本。</td>
                </tr>
                <tr>
                    <td>
                        <code>OptionContent</code>
                    </td>
                    <td>
                        <code>RenderFragment?</code>
                    </td>
                    <td>下拉项渲染的片段。</td>
                </tr>
                <tr>
                    <td>
                        <code>Disabled</code>
                    </td>
                    <td>
                        <code>bool</code>
                    </td>
                    <td>选择项是否为禁用状态。默认<code>false</code>。</td>
                </tr>
            </tbody>
        </MduiSimpleTable>
    </MduiTableContainer>
</div>